<%
  let active_class = if timed { "pagination-item-timed-active" } else { "pagination-item-active" };
  let clickable_class = if timed || !clickable { "" } else { "pagination-item-container-clickable" };
%>

<div 
  data-controller="pagination" 
  data-action="paginateNext@window->pagination#changePagination paginatePause@window->pagination#pause paginateResume@window->pagination#resume"
  data-pagination-active-class-value="<%- active_class %>"
  data-pagination-identifier-value="<%- identifier %>"
>
  <div class="pagination-container w-100 mt-4 pt-3">
    <% if count > 1 {
      for i in 0..count {
        let make_active = match active_index {
          Some(index) if i == index => "pagination-item-container-animation",
          Some(index) if i + 1 == index => "pagination-item-container-animation-reverse",
          Some(index) if i == count - 1 && index == 0 => "pagination-item-container-animation-reverse",
          _ => ""
        };
      %>
    <div class="pagination-item-container <%- clickable_class %> <%- make_active %>" data-pagination-target="paginationItem">
      <div class="pagination-item" data-action="click->pagination#change" data-pagination-index-param="<%- i %>"></div>
    </div>
    <% } 
      } %>
  </div>
</div>
